<template>
  <div>
    <div class="base-container mb-10px flex items-center">
      <div class="total">
        <span>累计充值金额：</span>
        <span class="amount">{{ formatNumberWithCommas(formatAmount(summary.recharge_fee)) }}</span>
        <span>元</span>
      </div>
      <div class="total">
        <span>累计优惠金额：</span>
        <span class="amount">{{ formatNumberWithCommas(formatAmount(summary.coupon_fee)) }}</span>
        <span>元</span>
      </div>
      <div class="total">
        <span>累计充值订单数：</span>
        <span class="amount">{{ formatNumberWithCommas(summary.order_sum) }}</span>
        <span>笔</span>
      </div>
    </div>

    <div class="base-container mb-50px">
      <el-table border v-loading="loading" :data="rechargeList">
        <el-table-column label="用户编号" align="center" prop="platformUserId" width="150" show-overflow-tooltip />
        <el-table-column label="充值时间" align="center" prop="rechargeTime" width="180" />
        <el-table-column label="电子卡号" align="center" prop="cardNo" min-width="150" show-overflow-tooltip />
        <el-table-column label="支付方式" align="center" prop="payChannel" width="100">
          <template #default="scope">
            <dict-tag :options="plat_order_pay_channel" :value="scope.row.payChannel" />
          </template>
        </el-table-column>
        <el-table-column label="充值金额（元）" align="center" prop="rechargeFee" width="120">
          <template #default="scope">
            <span>{{ formatAmount(scope.row.rechargeFee) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="优惠金额（元）" align="center" prop="couponFee" width="120">
          <template #default="scope">
            <span>{{ formatAmount(scope.row.couponFee) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="充值后余额（元）" align="center" width="130">
          <template #default="scope">
            <span>{{ formatAmount(scope.row.balance) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" align="center" prop="state" width="120">
          <template #default="scope">
            <dict-tag :options="recharge_order_status" :value="scope.row.state" />
          </template>
        </el-table-column>
        <el-table-column label="到账时间" align="center" prop="receiveTime" width="180" />
        <el-table-column label="订单编号" align="center" prop="outTradeNo" min-width="180" show-overflow-tooltip />
      </el-table>
    </div>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup>
const props = defineProps(['userId', 'platUserId'])
const { proxy } = getCurrentInstance()
const { recharge_order_status, plat_order_pay_channel } = proxy.useDict('recharge_order_status', 'plat_order_pay_channel')
import { listRecharge } from "@/api/order/recharge"

const rechargeList = ref([])
const loading = ref(false)
const total = ref(0)
const summary = ref({})
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  platformUserId: ''
})

const getList = () => {
  loading.value = true
  queryParams.value.platformUserId = props.platUserId
  listRecharge(queryParams.value).then(response => {
    rechargeList.value = response.rows
    total.value = response.total
    loading.value = false
    summary.value = response.remark || {}
  })
}

getList()

</script>

<style lang="scss" scoped>
.total {
  width: 33.33%;
  color: #606266;
  font-size: 14px;
  padding: 8px 0;

  .amount {
    color: #333;
    font-size: 18px;
    padding-right: 3px;
    font-weight: bold;
  }
}
</style>